<template>
  <div class="commen-container">
    <h1>课程介绍</h1>
    <div>
      <div class="intro-content animate__animated animate__fadeIn" v-html="tableData.course_intro"></div>
      <div>更新时间：{{ tableData.update_time }}</div>

      <el-button
        type="primary"
        @click="handleEdit"
        style="margin-top: 20px">
        修改内容
      </el-button>
    </div>

    <!-- 富文本编辑弹窗 -->
    <el-dialog
      title="编辑课程介绍"
      :visible.sync="editDialogVisible"
      width="80%"
      @close="handleCancelEdit">

      <!-- 使用 v-model 双向绑定编辑内容 -->
      <WangEditor
        ref="wangEditor"
        v-model="editContent"
        style="width: 100%; height: 60vh"/>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelEdit">取消</el-button>
        <el-button type="primary" @click="handleSaveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Message} from "element-ui";
import {getCourseIntro, updateCourseIntro} from "@/api/home/intro";
import WangEditor from '@/components/WangEditor';

export default {
  components: {
    WangEditor
  },
  data() {
    return {
      tableData: {
        course_intro: '',
        update_time: ''
      },
      editDialogVisible: false,
      editContent: '',       // 编辑中的内容
      originalContent: ''    // 原始内容备份
    }
  },
  methods: {
    async fetchTable() {
      try {
        const rep = await getCourseIntro({courseId: 1});
        this.tableData = rep;
        // 初始化时也备份原始内容
        this.originalContent = rep.course_intro || '';
      } catch (e) {
        console.log(e);
        Message.warning("查询失败！");
      }
    },

    // 打开编辑弹窗
    handleEdit() {
      this.editContent = this.tableData.course_intro || '';
      this.editDialogVisible = true;

      // 确保编辑器完全加载后再设置内容
      this.$nextTick(() => {
        if (this.$refs.wangEditor) {
          // 有些编辑器需要调用特定方法设置内容
          this.$refs.wangEditor.setContent(this.tableData.course_intro || '');
        }
      });
    },

    // 取消编辑
    handleCancelEdit() {
      // 恢复原始内容
      this.editContent = this.originalContent;
      this.editDialogVisible = false;
    },

    // 保存编辑
    async handleSaveEdit() {
      if (!this.editContent.trim()) {
        Message.warning("内容不能为空！");
        return;
      }

      try {
        this.editContent = this.$refs.wangEditor.getContent();
        await updateCourseIntro({
          course_id: 1,
          course_intro: this.editContent
        });

        Message.success("更新成功！");
        this.editDialogVisible = false;
        this.originalContent = this.editContent; // 更新备份
        await this.fetchTable(); // 刷新显示
      } catch (error) {
        console.error(error);
        Message.error("更新失败！");
      }
    }
  },
  mounted() {
    this.fetchTable();
  }
}
</script>

<style scoped lang="scss">
.intro-content {
  padding: 20px;
  margin: 10px auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

  /* 确保HTML内容样式正常 */
  > > > img {
    max-width: 100%;
  }

  > > > table {
    width: 100%;
    border-collapse: collapse;
  }

  > > > td, > > > th {
    border: 1px solid #ddd;
    padding: 8px;
  }
}
</style>
